<template>
	<div class="content">
		<h2><i class="iconfont icon-jinbi"></i>用户管理</h2>
		<div class="content-wrap">
			<!--搜索分类-->
			<div class="search">
				<div class="search__list">
					<div class="search__list--title">会员号</div>
					<el-input placeholder="会员号" v-model="params.mobile" clearable size="mini"></el-input>
				</div>
				<div class="search__list">
					<el-button type="primary" @click="loadData" size="mini">查找</el-button>
				</div>
			</div>
			<!--商品展示表格-->
			<div class="content-table" v-loading="loading" >
				<el-table :data="data" strip size="mini">
					<el-table-column label="姓名" prop="real_name"></el-table-column>
					<el-table-column label="手机号" prop="mobile"></el-table-column>
					<el-table-column label="身份证号" prop="id_no"></el-table-column>
					<el-table-column label="注册时间" prop="regist_time">
						<template slot-scope="scope" >
							<span v-if="scope.row.regist_time">{{scope.row.regist_time|formatTime}}</span>
						</template>
					</el-table-column>
					<el-table-column label="推广大使" prop="is_saleman">
						<template slot-scope="scope" >
							<el-button 
								v-if="scope.row.is_saleman == 1"
								type="primary"
								size="mini"
								@click="showSaleMan(scope.row.member_id, 1)">
								推广大使
							</el-button>
						</template>
					</el-table-column>
					<el-table-column label="区域经理" prop="is_manager">
						<template slot-scope="scope" >
							<el-button 
								v-if="scope.row.is_manager == 1"
								type="primary"
								size="mini"
								@click="showSaleMan(scope.row.member_id, 2)">
								区域经理
							</el-button>
						</template>
					</el-table-column>
					<el-table-column label="商户" prop="is_company_manager">
						<template slot-scope="scope" >
							<el-button 
								v-if="scope.row.is_company_manager == 1"
								type="primary"
								size="mini"
								@click="showCompany(scope.row.member_id)">
								商户
							</el-button>
						</template>
					</el-table-column>
				</el-table>
			</div>
			<el-pagination 
				@current-change="handleCurrentChange"
				background 
				layout="total, prev, pager, next, jumper"
				:total="totalNum" 
				class="fr"
				>
			</el-pagination>
			<div class="model" v-if="showSaleManModel">
				<h2 class="model__title">
					{{sale_man_type_name}}信息
					<span @click="showSaleManClose" class="model__title--close">&times;</span>
				</h2>
				<div class="model__content" v-loading="loading">
					<div v-if="data_saleman">
						<div class="item">
							<div class="item__title">{{sale_man_type_name}}信息</div>
							<div>
								<div class="item__detail">
									<span class="item__detail--title">{{sale_man_type_name}}编号:</span>
									<span class="item__detail--value">{{data_saleman.sale_man_id}}</span>
								</div>
								<div class="item__detail">
									<span class="item__detail--title">创建时间:</span>
									<span class="item__detail--value">
										<span v-if="data_saleman.create_time">{{data_saleman.create_time|formatTime}}</span>
									</span>
								</div>
							</div>
						</div>
						<div v-for="be_saleman in data_saleman.be_salemans">
							<div class="item" v-if="be_saleman">
								<div class="item__title">申请信息</div>
								<div class="item__detail">
									<div class="item__detail--title">申请日期:</div>
									<div class="item__detail--value">{{be_saleman.ask_time | formatTime}}</div>
								</div>
								<br/>
								<div class="item__detail">
									<div class="item__detail--title">申请结果:</div>
									<div class="item__detail--value" v-if="be_saleman.is_agree == 1">通过</div>
									<div class="item__detail--value" v-else-if="be_saleman.is_agree == 0">驳回
										<span v-if="be_saleman.reject_reason">驳回理由：{{be_saleman.reject_reason}}</span>
									</div>
									<div class="item__detail--value" v-else>未审核</div>
								</div>
								<br/>
								<div class="item__detail">
									<div class="item__detail--title">申请理由:</div>
									<div class="item__detail--value">{{be_saleman.ask_reason}}</div>
								</div>
								<br/>
								<div class="item__detail">
									<div class="item__detail--title">资质图片:</div>
									<div v-for="ask_res in be_saleman.ask_res" style="display: inline-block; padding: 0 20px;">
										<img :src="ask_res.thump + '400'" style="max-width: 200px; max-height: 200px;"/>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		created() {
			this.loadData();
		},
		components: {
		},
		data() {
			return {
				params: {
					mobile: null,
					page: 1,
					rows: 10
				},
				data: null,		
				loading: true,
				totalNum: 0,
				data_saleman: null,
				showSaleManModel: false,
				sale_man_type_name: ''
			}
		},
		methods: {
			handleCurrentChange(pages) {
				this.params.page = pages;
				this.loadData();
			},
			loadData() {
				this.loading = true;
				var url = `${this.url}/user/member_get_list.action`;
				var params = this.params;
				this.$http.get(url,{ params }).then((res)=> {
					this.totalNum = res.data.result.total;
					this.loading = false;
					this.data = res.data.result.rows;
				});
			},
			showSaleMan(member_id, sale_man_type) {
				this.showSaleManModel = true;
				if(sale_man_type == 2) {
					this.sale_man_type_name = '区域经理';
				} else {
					this.sale_man_type_name = '推广大使';
				}
				var url = `${this.url}/user/member_get_saleman.action`;
				var params = {
					member_id: member_id,
					sale_man_type: sale_man_type
				};
				this.$http.get(url,{ params }).then((res)=> {
					this.data_saleman = res.data.result;
				});
			},
			showSaleManClose() {
				this.showSaleManModel = false;
			}
		}
	}
</script>

<style scoped lang="scss">
.model {
	width: 800px;
	left: calc(50% - 400px);
}
.item__detail {
	width: 100%;
}
</style>